import Navbar from "../../components/nav-bar";
import { getHospitalDetailInfoById } from "../../api";
import Taro, { useLoad, useShareAppMessage } from "@tarojs/taro";
import { useState } from "react";
import "./index.scss";
import { Image, Button } from "@tarojs/components";
import Modal from "../../components/Modal";
import { changeToTx } from "../../utils";
const Hospital = () => {
  const [hospitalInfo, setHospitalInfo] = useState({});
  const [servicesLists, setServicesLists] = useState([]);
  const [visible, setVisible] = useState(false);
  useLoad(async (options) => {
    const { hid } = options;
    const hospitalInfo = await getHospitalDetailInfoById({ hid });
    setHospitalInfo(hospitalInfo.data.hospital);
    setServicesLists(hospitalInfo.data.services);
  });
  const handleHome = () => {};
  const handleShre = () => {
    setVisible(true);
  };
  const handleNavMap = () => {
    const data = (Taro.getStorageSync("cfg") &&
      JSON.parse(Taro.getStorageSync("cfg"))) || {
      name: "",
    };
    // 使用在腾讯位置服务申请的key
    const key = "UULBZ-M2B6L-NFVP7-MXINL-M6HI5-GWBO7";
    // 调用插件的app的名称
    const referer = data.name;
    // 是否启用智能规划
    const enableAI = true;
    // 是否开启导航功能
    const navigation = 1;

    const { lat, lng } = changeToTx(hospitalInfo.lat, hospitalInfo.lng);
    // 终点
    const endPoint = JSON.stringify({
      name: hospitalInfo.name,
      latitude: lat,
      longitude: lng,
    });
    // 个性化图层
    const layerStyle = 1;
    // https://lbs.qq.com/dev/console/application/mine
    //https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan
    //https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=72407124&lang=zh_CN
    // 参考 api https://fuwu.weixin.qq.com/service/detail/00024cc78b8140578af86e6905b415
    // 注意：2.0.0需路径填改为route-plan
    Taro.navigateTo({
      url: `plugin://route-plan/index?key=${key}&referer=${referer}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`,
    });
  };

  const handleToAppoint = (e) => {
    const { hid, svid } = e.currentTarget.dataset;

    Taro.navigateTo({
      url: "/pages/service/index?hid=" + hid + "&svid=" + svid,
    });
  };

  useShareAppMessage(() => {
    return {
      title: hospitalInfo.name,
      path: "/pages/hospital/index?hid=" + hospitalInfo.id,
    };
  });

  const handleCloseModal = () => {
    setVisible(false);
  };

  const handleCloseShareModal = () => {
    setVisible(false);
  };
  return (
    <view className="hospital-detail">
      <Navbar isHome={false} background="none" titleText={hospitalInfo.name} />
      <view className="hospital-detail-bg">
        <Image src={hospitalInfo.avatar_url}></Image>
      </view>
      <view className="hospital-detail__main">
        <view className="hospital-detail__main-head">
          <view className="hospital-detail__main-head-top">
            <image
              className="h-avatar"
              src={hospitalInfo.avatar_url}
              mode="scaleToFill"
            ></image>
            <view className="hospital-detail__main-head-top-mid">
              <view className="">
                <view className="hospital-detail__main-head-top-mid-txt">
                  {hospitalInfo.name}
                </view>
              </view>
              <view className="hospital-detail__main-head-top-mid-transform">
                <view className="hospital-detail__main-head-top-mid-transform-desc">
                  <text>{hospitalInfo.rank}</text>
                  <text>{hospitalInfo.label}</text>
                </view>
                <text onClick={handleShre} className="tranform-txt">
                  转发 >
                </text>
              </view>
            </view>
            <view className="hospital-detail__main-head-top-address">
              <text className="iconfont icon-dingwei"></text>
              <view className="">{hospitalInfo.address}</view>
              <view
                onClick={handleNavMap}
                className="hospital-detail__main-head-top-address-btn"
              >
                导航 >
              </view>
            </view>
          </view>
        </view>

        <view className="hospital-detail__main-content">
          <view className="hospital-detail__main-content-title">
            <text>在线选择您需要的服务</text>
          </view>
          {servicesLists.map((item) => {
            return (
              <view
                className="hospital-detail__main-content-item"
                key={item.id}
              >
                <image src={item.logo_image_url} mode=""></image>
                <view className="hospital-detail__main-content-item-txt">
                  <text className="hospital-detail__main-content-item-txt-title">
                    {item.name}
                  </text>
                  <view className="hospital-detail__main-content-item-txt-desc">
                    <text>{item.intro}</text>
                  </view>
                  <text className="hospital-detail__main-content-item-txt-price">
                    <text className="extra">{item.price}</text> 元/次
                  </text>
                </view>
                <view className="">
                  <Button
                    data-hid={hospitalInfo.id}
                    data-svid={item.id}
                    type="primary"
                    onClick={handleToAppoint}
                  >
                    预约
                  </Button>
                </view>
              </view>
            );
          })}
        </view>
      </view>

      <Modal visible={visible} onClose={handleCloseModal}>
        <view className="popup-content">
          <view className="popup-content-title">
            <text
              onClick={handleCloseShareModal}
              className="iconfont icon-close"
            ></text>
            <text className="share-txt">转发分享</text>
          </view>
          <view className="popup-content-main">
            <view className="popup-content-main-wxin">
              <button open-type="share">
                <text className="iconfont icon-a-fenxiang2"></text>
                <view className="title">
                  <text>发给微信好友</text>
                </view>
              </button>
            </view>
            <view className="popup-content-main-img">
              <text className="iconfont icon-weibiaoti1"></text>
              <view className="title">
                <text>生成分享图片</text>
              </view>
            </view>
          </view>
        </view>
      </Modal>
    </view>
  );
};

export default Hospital;
